<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="./img/yyy.png" />
  <title>梦想摇摇机</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #app {
      height: 100vh;
      width: 100vw;
    }

    .title {
      padding: 10vh 0 10vh 0;
      text-align: center;
      font-size: 5vw;
      font-weight: 500;
    }

    .numberBox {
      width: 100vw;
      padding: 0 5vw 0 5vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }

    .number {
      box-sizing: border-box;
      border: 1px solid #ff9494;
      width: 10vw;
      height: 10vw;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 1vw;
    }

    .number:nth-child(-n+5) {
      border-color: skyblue;
    }

    .operationBtn {
      margin: 10vh auto 0 auto;
      width: 30vw;
      height: 10vw;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 1vw;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3vw;
    }

    .resultList {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 5vw 0 5vw;
      margin-top: 5vh;
    }

    .resultList span {
      flex: 2;
      text-align: left;
    }

    .resultNum {
      flex: 1;
      text-align: center;
      color: #FF4747;
    }

    .resultNum:nth-child(-n + 6) {
      color: #333;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="title">梦想摇摇机</div>

    <div class="numberBox">
      <div class="number" v-for="(item,index) in list">{{item.value}}</div>
    </div>

    <div class="operationBtn" @click="!start?begainRandom():stopRandom()">{{!start?'开始':'停止'}}</div>


    <div v-if="resultList.length>0">
      <div class="resultList" v-for="(item,index) in resultList">
        <span>第 {{index + 1}} 组</span>
        <div class="resultNum" v-for="(item2,index2) in item">{{item2}}</div>
      </div>
    </div>

  </div>

  <script src="./js/ajax.js"></script>
  <script src="./js/vue.min.js"></script>
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        timer: null,
        start: false,
        resultList: [],
        list: [{
          key: 1,
          value: "",
          max: 35,
        }, {
          key: 2,
          value: "",
          max: 35,
        }, {
          key: 3,
          value: "",
          max: 35
        }, {
          key: 4,
          value: "",
          max: 35,
        }, {
          key: 5,
          value: "",
          max: 35
        }, {
          key: 6,
          value: "",
          max: 12
        }, {
          key: 7,
          value: "",
          max: 12
        }]
      },
      methods: {
        begainRandom() {
          if (this.resultList.length >= 3) {
            let str = "理智点，别摇了"
            this.list.map((item, index) => {
              return item.value = str.split("")[index]
            })
            return
          } else {
            this.start = true;
            if (this.timer) {
              clearInterval(this.timer)
              this.timer = null;
            }
            this.timer = setInterval(() => {
              let arr = this.getRandom();
              this.list.map((item, index) => {
                return item.value = arr[index];
              })
            }, 10)
          }

        },
        stopRandom() {
          this.start = false;
          if (this.timer) {
            clearInterval(this.timer)
            this.timer = null;
          }
          let arr1 = [];
          let arr2 = [];
          this.list.forEach((item, index) => {
            if (index < 5) {
              arr1.push(item.value);
            } else {
              arr2.push(item.value)
            }
          });
          this.resultList.push([...arr1.sort(this.sort), ...arr2.sort(this.sort)])
        },
        sort(m, n) {
          if (m < n) return -1
          else if (m > n) return 1
          else return 0
        },

        getRandom() {
          let arr = [];
          let arr2 = [];
          for (let i = 0; i < 5; i++) {
            const num = parseInt(Math.random() * 35) + 1
            if (arr.includes(num)) {
              i--
            } else {
              arr.push(num)
            }
          }
          for (let j = 0; j < 2; j++) {
            const num2 = parseInt(Math.random() * 12) + 1
            if (arr2.includes(num2)) {
              j--
            } else {
              arr2.push(num2)
            }
          }

          return [...arr, ...arr2]
        }
      }
    })
  </script>
</body>

</html>